<template>
    <div class="main">
        <header>头部</header>
        <div class="con">
            <router-view></router-view>
        </div>
        <footer>
            <ul>
                <router-link tag="li" to="/main/home">主页</router-link>
                <router-link tag="li" to="/main/movie">视频</router-link>
                <router-link tag="li" to="/main/news">新闻</router-link>
                <router-link tag="li" to="/main/comment">论坛</router-link>
                <router-link tag="li" to="/main/data">数据</router-link>
            </ul>
        </footer>
    </div>
</template>

<style lang="scss">
    .main{
        width:100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        header,footer{
            width:100%;
            height: 44px;
            background: lightblue;
        }
        footer{
            ul{
                display: flex;
                height:44px;
                justify-content:space-around;
                align-items: center;
                .active{
                    color:red;
                }
            }
        }
        .con{
            width:100%;
            flex:1;
        }
    }
</style>

